import React from 'react';
import { Button, Form, Input } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import MenuTable from '@/pages/Settings/MenuManagement/components/MenuTable';
import MenuDrawer from '@/pages/Settings/MenuManagement/components/MenuModal';
import { useMenuManagement } from '@/pages/Settings/MenuManagement/hooks';

const MenuManagement: React.FC = () => {
  const {
    menus, loading, modalVisible, editingMenu, form, searchForm,
    setModalVisible, setEditingMenu, handleSubmit, handleDelete,
    handleQuery, handleReset, getParentMenuOptions
  } = useMenuManagement();
  const { t } = useTranslation();

  return (
    <div className="menu-management">
      <div className="page-header">
        <h2>菜单管理</h2>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => {
            setEditingMenu(null);
            form.resetFields();
            setModalVisible(true);
          }}
        >
          新增菜单
        </Button>
      </div>
      <Form
        form={searchForm}
        layout="inline"
        onFinish={handleQuery}
        style={{ marginBottom: 16 }}
      >
        <Form.Item name="name" label="菜单名称">
          <Input placeholder="支持模糊搜索" allowClear />
        </Form.Item>
        <Form.Item name="path" label="路径">
          <Input placeholder="/system/menus" allowClear />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">查询</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={handleReset}>重置</Button>
        </Form.Item>
      </Form>
      <MenuTable
        menus={menus}
        loading={loading}
        onEdit={(menu) => {
          const menuData = {
            id: menu.id,
            name: menu.name,
            path: (menu as any).path || '',
            icon: (menu as any).icon,
            component: (menu as any).component,
            parentId: menu.parent_id,
            orderNum: menu.order_num,
            hidden: (menu as any).hidden,
            permission: (menu as any).permission,
            children: menu.children as any,
          };
          setEditingMenu(menuData);
          form.setFieldsValue(menuData);
          setModalVisible(true);
        }}
        onDelete={handleDelete}
      />
      <MenuDrawer
        visible={modalVisible}
        editingMenu={editingMenu}
        form={form}
        onClose={() => {
          setModalVisible(false);
          setEditingMenu(null);
          form.resetFields();
        }}
        onFinish={handleSubmit}
        parentMenuOptions={getParentMenuOptions()}
      />
    </div>
  );
};

export default MenuManagement; 